<template>
	<div id="movieClickCharts" v-bind:style="{ height: '400px' }"></div>
</template>

<script setup>//@ts-nocheck
import { onMounted, onUnmounted, inject } from "vue"
import api from '../../api/api'

// 声明定义一下echart
let echart = inject("echarts")
onMounted(() => {
	initChart()
})
onUnmounted(() => {
	echart.dispose
})
// 基础配置一下Echarts
function initChart() {
	let chart = echart.init(document.getElementById("movieClickCharts"))
	// 显示加载
	chart.showLoading()
	// 封装获取对应数据的方法
	async function toGetData() {
		return await api.get(`/mock/click`).then((res) => {
			return res.data.data
		})
	}
	toGetData().then((res) => {
		// 关闭加载
		chart.hideLoading()
		// 过滤数据
		let seriesData = {
			movieClick: [],
			articleClick: [],
			date: []
		}
		res.forEach(x => {
			seriesData.movieClick.push(x.movieClick.Num)
			seriesData.articleClick.push(x.articleClick.Num)
			seriesData.date.push(x.date)
		})
		// 总次数
		let accountArr = []
		seriesData.date.forEach((item, index) => {
			accountArr.push(seriesData.movieClick[index] + seriesData.articleClick[index]);
		})

		let options = {
			//鼠标滑过提示栏
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
				formatter: (params) => {
					// 提示栏显示内容
					let arr = [...params].slice(0, -1)
					let str = ''
					arr.forEach((item) => {
						str += item.marker + item.seriesName + item.data + '<br />'
					})
					str = arr[0].name + '<br />' + str
					return str
				},
			},
			title: [
				{
					x: 12,
					y: 12,
					text: '电影与文章点击情况',
					textStyle: {
						color: '#ecf0f1',
						fontSize: 23,
						fontWeight: 500,
					},
				},
				{
					x: 12,
					y: 36,
					text: '(可上下拖动/鼠标滚动查看各单位数据)',
					textStyle: {
						color: '#ecf0f1',
						fontSize: 10,
						fontWeight: 500,
					},
				},
			],
			//图表选择栏
			legend: {
				icon: 'square',
				// top: 20,
				bottom: '6%',
				left: 'center',
				orient: 'horizontal', //图例方向【horizontal/vertical】
				itemHeight: 14, //修改icon图形大小
				itemWidth: 14, //修改icon图形大小
				selectedMode: false, //不允许点击图例
				itemGap: 100,
				textStyle: {
					fontSize: 14,
					color: '#ecf0f1',
					padding: [0, 8],
				},
				data: ['文章点击', '电影点击'],
			},
			//图标离容器的距离
			grid: {
				left: '3%',
				right: '10%',
				bottom: '16%',
				top: '60',
				//是否包含坐标轴
				containLabel: true,
				//鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
			},
			//x坐标轴
			xAxis: [
				{
					type: 'value',
					name: '\n\n    (次)',
					nameTextStyle: {
						color: '#ecf0f1',
						fontSize: 14,
					},
					axisTick: {
						show: false,
					},
					boundaryGap: true,
					axisLine: {
						show: false,
					},
					axisLabel: {
						color: '#ecf0f1',
						fontSize: 14,
					},
				},
			],
			dataZoom: [
				// 横向柱状图，y轴超过15条数据就会展示出来
				{
					type: 'inside', // 放大和缩小
					orient: 'vertical',
					show: seriesData.date.length > 15,
					start: 0,
					end: seriesData.date.length > 15 ? 30 : 100, // 控制初始化时展示的百分比数量
					height: 15,
					left: '5%',
					right: '5%',
					bottom: '2%',
					moveHandleSize: 0, //去掉进度条顶部的横向拉动进度条
				},
			],
			//y坐标轴
			yAxis: [
				{
					type: 'category',
					name: '',
					data: seriesData.date,
					splitLine: {
						show: false,
					},
					inverse: true,
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						lineStyle: {
							// 属性lineStyle控制线条样式
							color: '#ecf0f1',
							width: 1,
							type: 'solid',
						},
					},
					axisLabel: {
						textStyle: {
							color: '#ecf0f1',
							fontSize: 14,
						},
					},
				},
			],
			// 数据展示区域
			series: [
				{
					name: '电影点击',
					type: 'bar',
					stack: 'Ad',
					color: '#EE6666',
					barWidth: 18,
					data: seriesData.movieClick,
				},
				{
					name: '文章点击',
					type: 'bar',
					color: '#F7D270',
					stack: 'Ad',
					barWidth: 18,
					data: seriesData.articleClick,
				},
				// 显示总数
				{
					name: '',
					type: 'bar',
					stack: '',
					color: '#ecf0f1',
					label: {
						show: true,
						position: 'outside',
						formatter: (params) => {
							return accountArr[params.dataIndex]
						},
					},
					z: 1,
					//不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
					barGap: '-100%',
					barWidth: 18,
					data: accountArr,
				},
			],
		}

		chart.setOption(options)
	})
	window.onresize = function () {
		//自适应大小
		chart.resize()
	}
}

</script>

<style lang="scss" scoped>

</style>